<template>
  <div class="w-full min-h-[100vh] bg-[#f2f2f2]">
    <div class="flex items-center bg-white">
      <van-search
        class="w-[269px]"
        v-model="param.name"
        placeholder="请输入搜索关键词"
        shape="round"
      />
      <div
        @click="search"
        class="w-[66px] h-[34px] flex justify-center items-center text-white bg-[#F38E40] rounded-[32px]"
      >
        搜索
      </div>
    </div>
    <div class="px-[15px] pt-[10px]">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="load"
      >
        <item :Info="Info" :list="list" @del="del"></item>
      </van-list>
    </div>
  </div>
</template>
<script setup lang="ts">
import item from "./item.vue";
import { orderIndex } from "@/utils/api";
import { reactive, ref } from "vue";
import { useRoute } from "vue-router";
const param = reactive<paramType>({
  page: 1,
  order_no: "",
  bd_no: "",
  name: "",
  brand_id: "",
  bx_id: "",
  start_time: "",
  end_time: "",
  state: "",
});
const Info = reactive<infoType>({
  current_page: "",
  last_page: "",
  per_page: "",
  total: "",
});
const list = ref([] as any);
const finished = ref(false);
const loading = ref(false);
const route = useRoute();
const getData = async () => {
  param.state = route.query.type as string;

  const res = await orderIndex(param);

  let Infokey: keyof infoType;
  for (Infokey in Info) {
    Info[Infokey] = res.msg[Infokey];
  }
  list.value.push(...res.msg.data);
  if (res.code == 1) {
    loading.value = false;

    if (Info.current_page >= Info.last_page) {
      finished.value = true;
    }
  }
};
//删除
const del = () => {
  param.page = 1;
  list.value = [];
  getData();
};
const load = () => {
  getData();
  param.page++;
};
//订单搜索
const search = () => {
  param.page = 1;
  list.value = [];
  getData();
};
</script>
<style scoped lang="scss">
:deep(.van-search) {
  width: 310px !important;
}
</style>
